<template>
  <div class="contai-box">
    <section class="container">
      <el-row class="position">
        酒店
        <i class="el-icon-arrow-right"></i> {{$route.query.city}}市酒店预订
      </el-row>
      <filter-search @seacthList="seacthListParent" @changeCityId="changeCityId"></filter-search>

      <el-row type="flex" class="hotel-option">
        <el-col :span="14">
          <FilterInfo />
        </el-col>
        <el-col :span="10">
          <FilterMap :cityId="cityId" />
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
import FilterSearch from "./FilterSearch";
import FilterInfo from "./FilterInfo";
import FilterMap from "./FilterMap";
export default {
  components: {
    FilterSearch,
    FilterInfo,
    FilterMap
  },
  data() {
    return {
      cityId: 197
    };
  },
  methods: {
    seacthListParent(List) {
      this.$emit("seacthResultList", List);
    },
    changeCityId(id) {
      this.cityId = id;
      console.log(this.cityId);
    }
  }
};
</script>

<style scoped lang="less">
.container {
  width: 1000px;
  margin: 0 auto;
  .position {
    margin: 15px 0;
    color: #606266;
    font-size: 14px;
  }
}
.hotel-option {
  margin: 20px 0;
}
</style>